<template>
    <div class="home-main">
       <div class="main">
        <div class="main-content">
            <div class="carousel">
                <img src="../../assets/head-img.jpg" alt="">
            </div>
            <div>
                <article class="post" v-for="item in list" :key="item.id">
                    <div class="post-content">
                        <div class="post-head home-post-head">
                            <h1 class="post-title" @click="toDetail(item.id)">
                                <span >{{item.title}}</span>
                            </h1>
                            <div class="post-meta"> &bull;
                                <time class="post-date" datetime="" title="">
                                    {{ item.updatedAt }}
                                </time>
                            </div>
                        </div>
                        <p class="brief"> 
                        </p>
                    </div>
                    <footer class="post-footer clearfix">
                    <div class="pull-left tag-list">
                        <div class="post-meta" style="display:flex">
                            <p>标签：</p>
                        <span class="categories-meta fa-wrap"
                        v-for="(item1, index) in item.categories" :key="index">
                        {{ item1.name }}
                        </span>  
                        </div>
                    </div>
                    <div class="post-permalink">
                        <span class="btn btn-default" @click="toDetail(item.id)">Read</span>
                    </div>
                    </footer>
                </article>
            </div>
        </div>
        <div class="main-nav">
          <div class="widget">
            <h3 class="title">
                Search
            </h3>
            <div id="search-form">
                <div id="result-mask" class="hide"></div>
                <div class="search-area">
                    <input id="search-key" type="search" autocomplete="off" placeholder="">
                    <button type="button" class="search-form-submit" id="search-local">搜索</button>
                </div>
                <div id="result-wrap" class="hide">
                    <div id="search-result"></div>
                </div>
                <div class="hide">
                    <template id="search-tpl">
                        <div class="item">
                            <a href="/{path}" title="{title}">
                                <div class="title">{title}</div>
                                <div class="content">{content}</div>
                            </a>
                        </div>
                    </template>
                </div>
            </div>
          </div>
          <div class="lable">
            <div class="lable-top"></div>
            <div class="lable-main"></div>
          </div>
          <div class="recommend">
            <div class="recommend-top"></div>
            <div class="recommend-main"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name:"Home",
        data() {
            return {
                list:[],
                pageIndex:'1',
                pageSize:'5',
                keyword:'',
            }
        },
        mounted() {
            this.getList();
            // this.getHotList();
            // this.getAllCategory();
        },
        methods:{
            async getList(id) {
                let params = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    is_del: 0,
                    keyword: this.keyword
                };
                if (id) {
                    params.categoryId = id;
                }
                const { data: res } = await this.$api.getArticleList(params);
                this.totalCount = res.count;
                this.list = res.data;
                console.log(this.list)
            },
            toDetail(id){
                this.$router.push(`/pages/Article?id=${id}`)
                console.log(id)
            }
        }
    }
</script>
<style scoped>
.hello{
  height: 100%;
  box-sizing: border-box;
  padding-top: 100px;
  background: #ebebeb;
}
.home-main{
    margin-top: 20px;
}
@media screen and (max-width: 500px){
    .carousel{
        width: 400px;
    }
    .post{
        width: 400px;
    }
}
.main-header{
  margin-top: -100px;
}
.content-wrap{
  margin-top: 20px;
  background: #ebebeb;
}
.main{
  width: 1170px;
  margin:0 auto; 
  height: 100%;
  display: flex;
}
.main-content{
  width: 66.66%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.main-nav{
  width: 33.33%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.widget{
  background: #fff;
  padding: 16px 25px;
}
.el-menu.el-menu--horizontal {
      margin-left: 370px;
      border: 0;
}
.post-title{
    cursor: pointer;
}
.lable{
    background: #fff;
}
.lable-top{
    height: 50px;
    border-bottom: 1px solid #ebebeb;
}
.lable-main{
    height: 150px;
}
.recommend{
    background: #fff;

}
.recommend-top{
    height: 50px;
    border-bottom: 1px solid #ebebeb;
}
.recommend-main{
    height: 150px;
}
</style>